<template>
  <!--添加联系人-->
  <div class="ziliao">
    <wv-group title="姓名">
      <wv-input placeholder="请输入姓名" v-model="contact.userName" :required=true type="text"></wv-input>
    </wv-group>
    <wv-group title="国内手机号码">
      <wv-input placeholder="请输入手机号" v-model="contact.userPhone"  type="number" :maxlength="11"></wv-input>
    </wv-group>
    <wv-group title="邮箱">
      <wv-input placeholder="请输入您的邮箱" v-model="contact.email" ></wv-input>
    </wv-group>
    <wv-switch title="设置为默认联系人" v-model="switchValue" class="set"></wv-switch>
    <input hidden="true" v-model="contact.isDef=isDef"/>
    <div class="delete" v-if="type==2">
      <img src="../../../assets/del.png" width="25" height="25" @click="goDelDetailinfo(contact.contactsId)">
      <p>删除</p>
    </div>
    <p class="offer" @click="goSubmitContact(contact)">保存</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {addContactInfo, contactsDetailinfo, delDontacts} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        switchValue: true,
        contact: {},
        type: 1,
        isDel: false
      };
    },
    methods: {
      checkFrom: function (contact) {
        let msg = {};
        if (this.$myUtils.isNull(contact.userName)) {
          msg['result'] = false;
          msg['info'] = '请输入姓名';
          return msg;
        }
        if (this.$myUtils.isNull(contact.userPhone)) {
          msg['result'] = false;
          msg['info'] = '请输入手机号';
          return msg;
        }
        if (this.$myUtils.isNull(contact.email)) {
          msg['result'] = false;
          msg['info'] = '请输入邮箱';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      getContactsDetailinfo(params) {
        contactsDetailinfo(params).then(res => {
          if (res.code == 100) {
            this.contact = res.object;
            let isDef=this.contact.isDef;
            if(isDef==2){
              this.switchValue =  false;
            }
          }
        })
      },
      goDelDetailinfo(contactsId) {
        delDontacts({contactsId:contactsId}).then(res => {
          if (res.code == 100) {
            this.contact = {};
          }
        })
      },
      goSubmitContact(contact) {
        let checkResult = this.checkFrom(contact);
        if (!checkResult.result) {
          Toast.text(checkResult.info);
          return;
        }
        addContactInfo(contact).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.$router.push({path: '/changyong', query: {activeIndex: 2}})
          } else {
            Toast.fail(res.info);
          }
        });
      }
    },
    computed: {
      isDef: function () {
        if (this.switchValue) {
          return '1';
        } else {
          return '2';
        }
      }
    },
    created() {
      let type = this.$route.query.type;
      this.type = type;
      if (type == 2 & this.isDel == false) {
        let contactsId = this.$route.query.contactsId;
        this.getContactsDetailinfo({contactsId: contactsId});
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ziliao {
    padding-bottom: 50px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
